

<template>
  <div class="guide">
    <Dao :flag="true" :time="60" :toggle="true"  color="red" :swidth="60" :isClick="true"  :onFinish="()=>gotopage('/ms')" ></Dao>
      <div class="swiper">
        <van-swipe @change="changeCurrent"  class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item,index) in banners" :key="index" v-if="item.imgs[0].url">
            <template  >
              <van-image class="img" :src="item.imgs[0].url.replace(/public/,baseURL)" ></van-image>
            </template>
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="gotos" v-if="current == this.banners.length - 1">
        <van-button @click="gotopage('/ms')"  type="primary" round block >进入面试角</van-button>
      </div>
  </div>
</template>

<script>
import { mapState ,  mapMutations  } from 'vuex'
import { MyMixins } from '@/common/mx'

export default {
  mixins:[MyMixins],
  data(){
    return {
      banners:[],
      current:0
    }
  },
  methods:{
    async getBannerData(){
      let res = await  this.$axios.post('https://lhx123.love:3333/app/getallinters')
      if(res.data.code==200){
        // 延迟执行
          this.$nextTick(()=>{
            this.banners = res.data.result.slice(0,5).filter(item=>item.imgs[0].url)
          })
      }
    },
    changeCurrent(index){
      this.current = index;
    }
  },
  // computed:{
  //   ...mapState([
  //     'count'
  //   ])
  // },
  // methods:{
  //   ...mapMutations([
  //     'changeCount'
  //   ])
  // },
  mounted(){


    console.log("guide - guide - mounted")
    if(this.$cookies.get('has_visit')){
      this.gotopage('/ms')
    }else{
      // 没有看过或者已经超过7天
      this.$cookies.set("has_visit",'has',60 * 60 * 24 * 7 ) // 一个星期
      this.getBannerData()
    }

  }
}
</script>


<style lang="scss" scoped>
.guide{
  .swiper{
    width:100%;
    height:70vh;
    .my-swipe{
      width:100%;
      height:100%;
      .img{
        width:100%;
        height:100%;
      }
    }

  }

  .gotos{
    width:100%;
    margin-top:50px;
    padding:0 50px;
  }
}
</style>
